<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>REGISTER</title>
<style type="text/css">
	.error {
	color: red;
	}
</style>


<script type="text/javascript" src="scripts/jquery-1.8.2.min.js"></script>
<script type="text/javascript">
	function validate() {
		var username = $("#username").val();
		if(username.trim().length < 6 || username.trim() > 20) {
			$("#username_error").html("Username invalid !");
			return false;
		}
		var password = $("#password").val();
		if(password.length < 6 || password.length > 20) {
			$("#password_error").html("Password invalid !");
			return false;
		}
		var conformPwd = $("#conformPwd").val();
		if(conformPwd != password) {
			$("#conformPwd_error").html("Confrom password must be look same password !");
			return false;
		}
		return true;
	}
	function doSumnit() {
		if(validate()) {
			var url = "UserServlet?method=register&username=" + $("#username").val() + "&password=" + $("#password").val()
					+ "&conformPwd=" + $("#conformPwd").val() + "&_" + new Date().getTime();
			$.post(url, function(data){
				alert(data.message);
				if(data.code == 1) {
					window.location.href="login.jsp";
				}
			});
		}
	}
	
	function hiddenErrorMsg(id) {
		$("#" + id + "_error").html('');
	}
	
	String.prototype.trim= function(){  
	    // 用正则表达式将前后空格  
	    // 用空字符串替代。  
	    return this.replace(/(^\s*)|(\s*$)/g, "");  
	}
</script>

</head>
<body>
	<h1>Register !</h1><hr />
	<table>
		<tr>
			<td>USRENAME:</td>
			<td><input name="username" id="username" onclick="javascript:hiddenErrorMsg(this.id);" /></td>
			<td id="username_error" class="error"></td>
		</tr>
		<tr>
			<td>PASSWORD:</td>
			<td><input name="password" id="password" type="password" onclick="javascript:hiddenErrorMsg(this.id);" /></td>
			<td id="password_error" class="error"></td>
		</tr>
		<tr>
			<td>CONFORM PASSWORD:</td>
			<td><input name="conformPwd" id="conformPwd" type="password" onclick="javascript:hiddenErrorMsg(this.id);" /></td>
			<td id="conformPwd_error" class="error"></td>
		</tr>
		<tr>
			<td><input type="reset" value="RESET" /></td>
			<td colspan="2"><input type="button" id="submit" value="SUBMIT" onclick="javascript:doSumnit();" /></td>
		</tr>
	</table>

</body>
</html>